<template>
  <div style="width: 100%">
    <el-date-picker
      v-model="date"
      style="width: 100%"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      @change="onDateRangeChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    label: String
  },
  data() {
    return {
      date: this.value
    }
  },
  watch: {
    label(val) {
      console.log('监听', val)
      if (val === 'clear') {
        this.date = ['', '']
        this.onDateRangeChange(['', ''])
      }
    }
  },
  methods: {
    onDateRangeChange(val) {
      if (Array.isArray(val) && val.length === 2) {
        this.$emit('update-date-range', val)
      } else {
        this.$emit('update-date-range', ['', ''])
      }
    }
  }
}
</script>
